// 引入公用的依赖
import Vue from "vue";
import Router from 'vue-router'
// 使用中间件
Vue.use(Router)

// 引入需要展示的组件
// import Cart from '../views/CartIndex.vue';
// import Hello from '../views/Hello.vue'
// import GetUrlVal from '../views/GetUrlVal.vue'
// import List from '../views/List.vue'
// import Detail from '../views/Detail.vue'
// import Layout from '../views/Layout.vue'
// import Page1 from '../views/Page1/Center.vue'
// import Page2 from '../views/Page2/Center.vue'
// import Page3 from '../views/Page3/Center.vue'
// import NotFound from '../views/404.vue'

// 改为懒加载
// 这里是箭头函数return的缩写
// 从原来的组件名变成了函数名，调用时函数才会执行，执行之后才会加载组件。所以节省性能
const Cart = ()=>import('../views/CartIndex.vue')
const Hello = ()=>import('../views/Hello.vue')
const GetUrlVal = ()=>import('../views/GetUrlVal.vue')
const List = ()=>import('../views/List.vue')
const Detail = ()=>import('../views/Detail.vue')
const Layout = ()=>import('../views/Layout.vue')
const Page1 = ()=>import('../views/Page1/Center.vue')
const Page2 = ()=>import('../views/Page2/Center.vue')
const Page3 = ()=>import('../views/Page3/Center.vue')
const MyTransition = ()=>import('../views/MyTransition.vue')
const Vuex = ()=>import('../views/Vuex.vue')
const Caiji = ()=>import('../views/Caiji.vue')
const Ele = ()=>import('../views/Ele.vue')
const Login = ()=>import('../views/Login.vue')
const Content = ()=>import('../views/Content.vue')
const Menu = ()=>import('../views/menu/Index.vue')
const NotFound = ()=>import('../views/404.vue')


// 文件路径，比如： ../views/404.vue  是一个固定的地址
// 路由地址，比如：  path: '/cart'  是自己定义的 可以任意修改
// 接口地址，比如： /paly/hot  这是后端程序的函数名 后端可以改 前端不能改

// 路由表--页面和地址的对应关系
const routes = [
    // 路由对象
    {path: '/cart', component: Cart, meta: {title: '购物车', auth: '1'}, beforeEnter: (to, from, next)=>{
        // 单个路由表独享的守卫
        if(to.meta.auth == JSON.parse(localStorage.getItem('myAuth'))) {
            next()
        }else {
            next('/')
        }
    }},
    {path: '/', component: Hello, meta: {title: '首页'}},
    {path: '/vuex', component: Vuex, meta: {title: 'vuex'}},
    {path: '/caiji', component: Caiji, meta: {title: '菜鸡'}},
    {path: '/ele', component: Ele, meta: {title: '饿了吗'}},
    {path: '/login', component: Login, meta: {title: '登录'}},
    {path: '/a', component: Content, children: [
        {path: 'menu', component: Menu, meta: {title: '菜单'}}
    ]},
    {path: '/transition', component: MyTransition, meta: {title: '过渡效果'}},
    {path: '/geturlval', name:'xxx', component: GetUrlVal, meta: {title: '参数页', needLogin: true, auth: '1'}},
    {path: '/list', component: List, meta: {title: '歌曲列表页'}},
    // 动态路由 限定了路由格式，固定值+可变值 一个Detail组件 可以渲染出来无数个页面
    // 页面结构相同，数据不同，大量重复的页面--动态路由
    {path: '/detail/:name', component: Detail, meta: {title: '歌曲详情页'}},
    // 嵌套路由
    {path: '/layout', component: Layout,children: [
        // 这里是子路由
        // 完整的路由 = 父路由 + 子路由
        {path: '', component: Page1}, // 完整地址=/layout/
        {path: '/layout/2', component: Page2}, // 如果写了/ 那就要从父路由开始 写完整的地址
        {path: '3', component: Page3},
    ]},
    // 404的处理 * 通配符 匹配任意长度的任意字符串，可以匹配所有情况
    // {path: '*', component: NotFound},
    // =================
    // 重定向 会修改页面的url
    {path: '*', redirect: '/404'},
    {path: '/404', component: NotFound}
]

// 创建路由实例
const router = new Router({
    // 参数如下
    // 路由表
    routes: routes,
    // 前缀
    base: '/aaa',
    // 路由模式 hash是默认的 带有#   history更常用 没有#
    mode: 'history'
})

// 全局前置守卫
router.beforeEach((to, from, next)=>{
    // to 是要去的路由对象 from是正在离开的路由对象
    document.title =to.meta.title || '迷瞪';  
    // 登录校验
    // next的作用是继续向后执行，将执行权交给后面的中间件
    next()
})

export default router
